<template>
  <v-card flat tile color="#00000000" light>
    <v-row>
      <div id="overview-router-view-wrapper" style="display:inline-block;width:100%;">
        <router-view></router-view>
      </div>
      <div style="position: fixed;top:130px;right: 0;background: transparent;width: 128px;">
        <v-list color="#00000000">
          <v-subheader>页面导航</v-subheader>
          <v-list-item-group color="primary" v-if="this.$route.path === '/overview/global'">
            <v-list-item v-for="item in bookmarks[0]" :key="item.id" @click="gotoBookmark(item.position)">
              <v-list-item-content>
                <v-list-item-title v-text="item.text"></v-list-item-title>
              </v-list-item-content>
            </v-list-item>
          </v-list-item-group>
          <v-list-item-group color="primary" v-else>
            <v-list-item v-for="item in bookmarks[1]" :key="item.id" @click="gotoBookmark(item.position)">
              <v-list-item-content>
                <v-list-item-title v-text="item.text"></v-list-item-title>
              </v-list-item-content>
            </v-list-item>
          </v-list-item-group>
        </v-list>
      </div>
    </v-row>
  </v-card>
</template>

<script>
import OverviewBookmarks from "../../../components/views/public/Overview/OverviewBookmarks";
export default {
  data() {
    return {
      bookmarks: OverviewBookmarks.bookmarks,
    }
  },
  methods: {
    gotoBookmark(position) {
      console.log(this.$route.path);
      window.scrollTo({top: position, left: 0, behavior: 'smooth'});
    }
  }
}
</script>